<template>
  <div id="home">
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item,i) in imgs" :key="i">
        <img :src="item.img" alt="" width="100%" height="250px">
      </mt-swipe-item>

    </mt-swipe>

    <div id="news">
      <div class="newslist" v-for="(item,index) in newslist" :key="index">
        <router-link :to="{'name':item.name}">
          <div class="newslist-img">
            <img :src="item.img" alt="" width="100%" height="100%">
          </div>
          <div class="newslist-text">
            <h5>{{item.news}}</h5>
            <span>{{item.date}}</span>
            <span>{{item.click}}</span>
          </div>
        </router-link>

      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'home',
  data(){
    return {
      imgs:[
        {img:require('@/assets/111.jpg')},
        {img:require('@/assets/222.jpg')}
      ],
       newslist:[
        {name:'newlist111',news:'好钓好线好钓鱼',img:require('@/assets/111.jpg')},
        {name:'newlist222',news:'好钓好线好钓鱼',img:require('@/assets/222.jpg')},
        {name:'newlist333',news:'好钓好线好钓鱼',img:require('@/assets/333.jpg')},
        {name:'newlist444',news:'好钓好线好钓鱼',img:require('@/assets/444.jpg')},
        {name:'newlist111',news:'好钓好线好钓鱼',img:require('@/assets/111.jpg')}
      ]
    }
  }
}
</script>
<style lang="css">
  .mint-swipe{
    height: 250px;
  }
  .newslist{
  width:100%;
  height: 100px;
  padding:5px;
  box-sizing: border-box;
  box-shadow: 2px 2px 2px 0px #ccc;

}
.newslist .newslist-img{
  width: 40%;
  height:100%;
  float: left;
}

.newslist .newslist-text{
  width: 60%;
  height: 100%;
  float: right;
  text-align: center;
  background-color: rgba(0,0,0,0.1);
}
.newslist .newslist-text span{
  display: inline-block;
  margin: 0 20px;
}
.newslist-text h5{
  padding-top: 20px;
}
</style>
